<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>在线教育平台系统</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/public.css">
    <style>
        .addDiv{
            display: none;
            margin-top: -100px;
        }
        .content{
            padding-top:10px;
        }
        .ok{
            width: 97px;
        }
        .tiaojian{
            margin-left: 80px;
        }
        .tiaojian div{
            float: left;
        }
        .tiaojian input{
            width: 200px;
        }
        .content .layui-form-label{
            margin-top: 10px;
        }
        .content .layui-input-block{
            width: 75%;
            margin-top: 10px;
        }
        .button{
            margin-top: 20px;
        }
        .left{
            position: absolute;
            left: 0px;
            top: -10px;
            height: 500px;
            width: 1166px;
        }
        #add{
            position: absolute;
            top:40px;
            left: 787px;
            width: 198px;
            background-color: orangered;
        }
        .chaxun{
            position: absolute;
            top: 40px;
            left: 490px;
            width: 198px;
        }
    </style>
</head>
<body>
<div class="layui-body left">
    <table class="layui-hide" id="demo" lay-filter="test"></table>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add" id="add" style=" height: 38px">添加</button>
        </div>

        <div class="layui-btn-container tiaojian">
            <div>
                <label class="layui-form-label ok">课程名称:</label>
                <input type="text" id="classroom" name="classroom"  placeholder="请输入标题" autocomplete="off" class="layui-input" >
            </div>
            <div>
                <label class="layui-form-label ok">课程教师:</label>
                <input type="text" id="title" name="title"  placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
            <div>
                <label class="layui-form-label ok">课程价格:</label>
                <select id="state" name="state" lay-verify="required">
                    <option value="">请选择</option>
                    <option value="0">300</option>
                    <option value="1">600</option>
                    <option value="2">900</option>
                </select>
            </div>
            <div class="c"></div>
            <div>
                <label class="layui-form-label ok">课程描述:</label>
                <select id="jiejueren" name="jiejueren" lay-verify="required">
<!--                    <option value="">请选择</option>-->
                </select>
            </div>
            <button lay-event="search" class="layui-btn layui-btn-sm chaxun" style=" height: 38px">查询</button>
        </div>
        <div class="c"></div>
    </script>

    <script type="text/html" id="barDemo">
<!--        <a class="layui-btn layui-btn-xs" lay-event="show">查看详情</a>-->
        <a class="layui-btn layui-btn-xs" style="background-color: green;" lay-event="update">修改</a>
        <a class="layui-btn layui-btn-xs" style="background-color: red;" lay-event="delete">删除</a>
    </script>

    <!-- 序号 -->
    <script type="text/html" id="xuhao">
        {{d.LAY_TABLE_INDEX+1}}
    </script>
</div>
<!--  添加的div-->
<div id="addDiv" class="addDiv" >
    <div class="layui-form">
        <div class="layui-form-item content">
            <label class="layui-form-label">课程名称</label>
            <div  class="layui-input-block">
                <input type="text" name="classRoom"  required lay-verify="required" placeholder="请输入课程名称" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">课程教师</label>
            <div  class="layui-input-block">
                <input type="text" name="breakdownTitle"  required lay-verify="required" placeholder="请输入课程教师" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">课程价格</label>
            <div  class="layui-input-block">
                <input type="text" name="breakdownTitle"  required lay-verify="required" placeholder="请输入课程价格" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">课程详情</label>
            <div  class="layui-input-block">
                <textarea style="height: 200px" name="breakdownContent"  required lay-verify="required" placeholder="请输入课程详情。" autocomplete="off" class="layui-input"></textarea>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn button" lay-submit lay-filter="formDemo">立即提交</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--  添加结束  -->
<div class="layui-footer">
    <!-- 底部固定区域 -->
</div>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./layui/layui.js"></script>
<script src="./js/public.js"></script>
<script>
    var header = {
        Authorization: window.localStorage.getItem("Authorization")
        , userid: window.localStorage.getItem("userid")
    }
    layui.use(['element','table','layer','form'], function(){
        var element = layui.element;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        table.render({
            elem: '#demo'
            ,url:classes.show
            ,method:'post'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: []
            ,title: '批次信息表'
            ,request:{
                pageName: 'page' //页码的参数名称，默认：page
                ,limitName: 'rows' //每页数据量的参数名，默认：limit
            },headers:header,
            done:function (res) {
                if (res.status==-2) {
                    layer.confirm('身份过期，重新登录',{btn:['知道了'],
                        cancel: function(index, layero){
                            //取消操作，点击右上角的X
                            parent.location.href = "../login.html";
                        }},function(index){
                        parent.location.href = "../login.html";
                    });
                }
            }
            ,where:{
                createBy:localStorage.getItem("userid")
            }
            ,contentType:"application/json; charset=utf-8"
            ,cols: [[
                {title: '序号',templet: '#xuhao',type:'numbers',fixed: 'left'}
                ,{field:'Id', title:'ID',hide:true}
                ,{field:'className', title:'课程名称',width:110}
                ,{field:'teacher', title:'课程教师',width:150}
                ,{field:'price', title:'价格',width:150}
                ,{field:'classDecribe', title:'课程描述',width:110}
                 //     templet:function (d) {
                 //         if(d.breakdownState =="未处理"){
                 //             return '<span style="color:#000000;">' + d.breakdownState + '</span>'
                 //         }else if(d.breakdownState =="处理中"){
                 //             return '<span style="color:orangered;">' + d.breakdownState + '</span>'
                 //         }else{
                 //             return '<span style="color:green;">' + d.breakdownState + '</span>'
                 //         }
                 //     }
                 //    }
                 ,{field:'createTime', title:'创建时间',width:170}
                 // ,{field:'solveName', title:'处理人',width:120}
                 // ,{field:'solveTime', title:'处理时间',width:170}
                 ,{fixed: 'right', title:'操作', toolbar: '#barDemo',width:200}
            ]]
            ,page:true
            ,parseData: function (res) {
                return{
                    "code":res.status,
                    "msg":res.message,
                    "count":res.total,
                    "data":res.data
                }
            }
        });

        table.on('toolbar(test)',function (obj) {
            if (obj.event==='search'){
                table.reload('demo', {
                    method:"post",
                    page: {
                        curr: 1
                    },
                    where: {
                        className:$("#classname").val(),
                        Teacher:$("#teacher").val(),
                        Price:$("#price").val(),
                        solveBy:$("#jiejueren").val()
                    }
                });
                // showTeacher();
            }else if(obj.event==='add'){
                layer.open({
                    type:1,
                    title:'增加课程',
                    area: ['60%', '70%'], //宽高
                    content: $("#addDiv").html(),
                    offset:'40px'
                })
            }
        });
        //监听行操作
        table.on('tool(test)', function(obj){
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent==='show'){
                layer.open({
                    type:2,
                    title:'课程详情',
                    area: ['60%', '73%'], //宽高
                    // content: '../detail/breakdowndetail.html',
                    content: './classesdetail.html',
                    offset:'40px',
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        //console.log(body.html()) //得到iframe页的body内容
                        //初始化表单数据的值
                        body.find("#className").html(data.className); //要修改的每个td的值存为变量传进去
                        body.find("#teacher").html(data.Teacher);
                        body.find("#title").html(data.breakdownTitle);
                        body.find("#price").html(data.Price);
                        body.find("#baogaoren").html(data.createName);
                        body.find("#baogaotime").html(data.createTime);
                        body.find("#jiejueren").html(data.solveName);
                        body.find("#jiejuetime").html(data.solveTime);
                    }
                })
            }else if(layEvent==='update'){
                layer.open({
                    type:2,
                    title:'修改课程',
                    area: ['60%', '70%'], //宽高
                    content: '../update/updatebreakdown.html',
                    offset:'40px',
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        //console.log(body.html()) //得到iframe页的body内容
                        //初始化表单数据的值
                        body.find("#className").val(data.className); //要修改的每个td的值存为变量传进去
                        body.find("#breakdownTitle").val(data.breakdownTitle);
                        body.find("#breakdownContent").html(data.breakdownContent);
                        body.find("#breakdownId").val(data.breakdownId);
                    },end:function () {
                        table.reload('demo', {
                            url: url+classes.show,
                            where:{
                                createBy:localStorage.getItem("userid")
                            }
                        });
                        // showTeacher();
                    }
                })
            }else{
                layer.confirm('确定删除吗？', function(index){
                    obj.del();
                    layer.close(index);
                    table.reload('demo', {
                        headers: header,
                        url: classes.delete
                        , where: {
                            Id:data.Id
                        }
                    });
                    table.reload('demo', {
                        url: classes.show,
                        where:{
                            createBy:localStorage.getItem("userid")
                        }
                    });
                    // showTeacher();
                    //刷新当前页面，局部刷新失败。
                    layer.open({
                        title: '提示'
                        ,content: '删除成功'
                        ,yes:function(index, layero) {
                            layer.close(index);
                        }});
                });
            }
        });

        // showTeacher();
        //监听提交
        form.on('submit(formDemo)', function(data){
            var url = classes.add;
            var parm = data.field;
            parm.createBy = localStorage.getItem("userid");
            $.ajax({
                method:"post",
                url:url,
                data:JSON.stringify(parm),
                dataType:"json",
                contentType: 'application/json',
                headers:header,
                success:function (res) {
                    if (res.status==0) {
                        layer.open({
                            title: '提示'
                            ,content: '添加成功'
                            ,yes:function(index, layero) {
                                location.href="myclasses.html";
                            }});
                    }else if (res.status==-2) {
                        layer.confirm('身份过期，重新登录',{btn:['知道了'],
                            cancel: function(index, layero){
                                //取消操作，点击右上角的X
                                parent.location.href = "../login.html";
                            }},function(index){
                            parent.location.href = "../login.html";
                        });
                    }
                }
            })
        })

        // function showTeacher(){
        //     var param = {page:"",rows:""}
        //     $.ajax({
        //         method:"post",
        //         url:'http://localhost:8082/auth/showTeacher',
        //         dataType:'json',
        //         data:JSON.stringify(param),
        //         headers:header,
        //         contentType:'application/json',
        //         success:function (res) {
        //             if(res.status==0){
        //                 for(var i=0;i<res.data.length;i++){
        //                     //等于1就代表是任课教师
        //                      if(res.data[i].roleId==="2"){
        //                         $("#jiejueren").append("<option value='"+res.data[i].userId+"'>"+res.data[i].userName+"</option>")
        //                     }
        //                     form.render('select');
        //                 }
        //             }else if (res.status==-2) {
        //                 layer.confirm('身份过期，重新登录',{btn:['知道了'],
        //                     cancel: function(index, layero){
        //                         //取消操作，点击右上角的X
        //                         parent.location.href = "../login.html";
        //                     }},function(index){
        //                     parent.location.href = "../login.html";
        //                 });
        //             }else{
        //                 layer.msg("出现了未知的故障");
        //             }
        //         }
        //     });
        // }
    });
</script>
</body>
</html>
